<template>
  <el-card style="max-width: 100%">
   <div class="bg-top">
      <div style="line-height: 200px ;height: 200px">
          <div style="font-size: 70px;;">
           <div style="float: left;margin: 0 20px"><span class="money-icon">￥</span> </div>
           <div style="float: left">余额: </div>
           <div style="float: left">{{ (userInfo.money || 0).toFixed(2)}}元</div>
         </div>
     </div>
    </div>

    <div>
      <div class="pay-title">选择充值金额</div>
      <el-radio-group v-model="Recharge.money">
        <el-radio value="10" size="default" border>10￥</el-radio>
        <el-radio value="30" size="default" border>30￥</el-radio>
        <el-radio value="50" size="default" border>50￥</el-radio>
        <el-radio value="100" size="default" border>100￥</el-radio>
        <el-radio value="150" size="default" border>150￥</el-radio>
        <el-radio value="200" size="default" border>200￥</el-radio>
        <el-radio value="500" size="default" border>500￥</el-radio>
        <el-radio value="1000" size="default" border>1000￥</el-radio>
      </el-radio-group>
      <div >其他金额:<input type="text" placeholder="其他金额" v-model="otherMoney">￥</div>
      <el-button type="danger" style="float: right" @click="update">支付</el-button>
      <input type="password" class="pay-password" placeholder="请输入支付密码" v-model="Recharge.payPassword"/>
    </div>

  </el-card>
</template>



<script setup>
import {  ref } from 'vue'
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";
//修改的对话框
const updateDialogShow=ref(false);
//总金额
const total=ref(0);
//充值金额
const Recharge=ref({
  username:'',
  money:'',
  payPassword:'',
})
//其他金额
const otherMoney=ref(null);
function update(){
  if (otherMoney.value){
    Recharge.value.money=otherMoney.value;
  }
  console.log(Recharge.value)
  userApi.updateMoney(Recharge.value)
      .then(resp=>{
        if(resp.code==10000){
          ElMessage.success(resp.msg);
          //刷新页面
          getInfo();
        }else {
          ElMessage.error(resp.msg)
        }
      })
}

//用户信息
const userInfo=ref({});
function getInfo(){
  userApi.getInfo()
      .then(resp=>{
        userInfo.value=resp.data
        Recharge.value.username=resp.data.username;
        total.value=userInfo.value.money;
      })
}
getInfo();

</script>
<style scoped>
.money-icon {
  display: inline-block; /* 允许设置宽度和高度 */
  width: 150px; /* 你可以根据需要调整大小 */
  height: 150px; /* 你可以根据需要调整大小 */
  line-height: 150px; /* 垂直居中文字 */
  text-align: center; /* 水平居中文字 */
  border: 5px solid #1eee72; /* 边框颜色和宽度，你可以根据需要调整 */
  border-radius: 50%; /* 圆形边框 */
  background-color: #17cf6a;
  color: rgba(254, 238, 59, 0.95); /* 文字颜色，你可以根据需要调整 */
  font-size: 100px; /* 文字大小，你可以根据需要调整 */
  margin-right: 20px; /* 与右侧内容的间距，你可以根据需要调整 */
}
.bg-top{
  background-color:#17cf6a;
}
.pay-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  text-align: center;
}
input[type="text"] {
  width: 15%;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #DCDFE6; /* Element UI的边框色 */
  border-radius: 4px;
  box-sizing: border-box;
}
.pay-password{
  width: 15%;
  padding: 5px;
  font-size: 16px;
  float: right;
}


</style>